<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>魏远商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/sm.css">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/sm-extend.css">
		<link rel="stylesheet" href="css/ionicons.css">
		<link rel="stylesheet" href="css/tab-home.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
		<style type="text/css">
			/*.lookmore:after {
				width: 21px;
				background-image: url(img/back-ri.png);
				content: '';
				height: 40px;
				position: absolute;
				z-index: 30;
			}*/
			.lookmore>img {
				padding-top: 4px;
				margin-left: 6px;
				height: 14px;
				margin-right: 11px;
			}
			.col-20 img{
				width: 50%;
			}
			.ispan{
				width: 66%;
				margin-left: 25%;
			}
			.smallpeo{
				vertical-align: middle;
			    width: 29px;
			    margin-right: 5px;
			}
			.home-bao>p:nth-child(1){
				width: 100%;
			    margin-right: 5px;
			    font-size: .6rem;
			    color: #5f5f5f;
			    text-align: right;
			    height: 22px;
			    line-height: 22px;
			}
		</style>
	</head>
	<body>
		<div class="page-group">
			<div class="page page-current">
				<!--顶部-->
				<div class="header">
					<span class="hspan"><img src="img/language1.png" width="90%"/></span>
					<form method="post" id="form" action="#" class="ispan"><input maxlength="8" type="text" placeholder="请输入关键词" /><img src="img/search.png" style="width: 2rem;"></form>
					<!--<p><span>厚和大厦</span><img src="img/back-bo.png" alt="" width="15%"/></p>-->
				</div>
				<!--这里是页面内容区域-->
				<div class="content ">
					<div class="swiper-container banner-swp" style="">
						<div class="swiper-wrapper">
							<!--<div class="swiper-slide"><img class="img1"  width="100%" height="100%" alt="" /></div>
						    <div class="swiper-slide"><img class="img2"  width="100%" height="100%" alt="" /></div>
						    <div class="swiper-slide"><img class="img3"  width="100%" height="100%" alt="" /></div>
						    <div class="swiper-slide"><img class="img4"  width="100%" height="100%" alt="" /></div>
						    <div class="swiper-slide"><img class="img5"  width="100%" height="100%" alt="" /></div>-->
						</div>
						<div class="swiper-pagination ">

						</div>
					</div>
					<div class="swiper-container mudele-swp">
						<div class="swiper-dwrapper">
							<div class="swiper-dslide">
								<div class="row no-gutter module-categories">
									<a class="col-20" onclick="tz('marketing.html','marketing','66')" id="logistic">
										<span style="background:  #fa7876;"><img src="img/class3.png" alt="" width="60%"/></span>
										<p>热销爆款</p>
									</a>
									<a class="col-20" onclick="tz('marketing.html','marketing','65')">
										<span style="background: #82d0e7;"><img src="img/class5.png" alt="" width="60%"/></span>
										<p>新品速递</p>
									</a>
									<a class="col-20" onclick="tz('marketing.html','marketing','59')">
										<span style="background: #8bdb6c;"><img src="img/class7.png" alt="" width="60%"/></span>
										<p>营销活动</p>
									</a>
									<a class="col-20" onclick="tz('marketing.html','marketing','64')">
										<span style="background: #fb8b87;"><img src="img/class4.png" alt="" width="60%"/></span>
										<p>优品馆</p>
									</a>
									<!--<a class="col-20">
										<span style="background: #6ddab7;"><img src="img/class5.png" alt="" width="60%"/></span>
										<p>新品速递</p>
									</a>
									<a class="col-20">
										<span style="background: #e493cb;"><img src="img/class6.png" alt="" width="60%"/></span>
										<p>买一赠一</p>
									</a>
									<a class="col-20">
										<span style="background: #daa674;"><img src="img/class7.png" alt="" width="60%"/></span>
										<p>秒杀闪购</p>
									</a>
									<a class="col-20">
										<span style="background: #90d8e4;"><img src="img/class8.png" alt="" width="60%"/></span>
										<p>特惠换购</p>
									</a>-->
								</div>
							</div>

						</div>
					</div>
					<div class="act_title">
						<!--<img src="img/title7_01.png" width="100%" alt="" />-->
						<img src="img/weiyuan.png" height="40%" style="margin-left: 15px;" />
						<img src="img/weiyuan2.png" height="40%" style="margin-left: 5px;" />
						<!--<span></span>-->
						<!--<img src="img/weiyuan3.png" height="40%" alt="" />
						<img src="img/weiyuan4.png" height="30%" alt=""  style="margin-left: 2px;margin-top: 12px;"/>-->
					</div>
					<div class="home-bao">
						<p id="1" class="lookmore">查看更多<img src="img/back-ri.png"/></p>
					</div>
					<!--品牌推荐-->
					<div class="contentall">
						<!--<div class="hone-recommend" style="margin-bottom: 0;">
							<p style="text-align: center;">—— 品牌推荐 ——</p>
							<p>查看更多</p>
							<img src="img/product2.png" alt="" width="96%"/>
							<div class="home-se"></div>
						</div>
						
						<div class="hone-recommend" style="margin-bottom: 0;">
							<p style="text-align: center;">—— <span class="home-sw-t">你好</span> ——</p>
							<p>查看更多</p>
							<img src="img/product2.png" alt="" width="96%"/>
							<div class="home-sw"></div>
						</div>
						
						<div class="hone-recommend" style="margin-bottom: 0;">
							<p style="text-align: center;">—— <span class="home-sq-t">你好</span> ——</p>
							<p>查看更多</p>
							<div class="home-sq"></div>
					    </div>-->
					</div>
					<div class="more">
						<p><img class="smallpeo" src="img/smallpeo.png"/>点击查看全部商品</p>
					</div>
				</div>
			</div>
			<nav class="footer mui-bar-tab">
				<a class="tab-item external" href="tab-home.html">
					<img class="a1" src="img/home.png" alt="" /><br />
					<span style="color: #e9af29;">首页</span>
				</a>
				<a class="tab-item external " href="tab-category.html">
					<img class="a2" src="img/category.png" alt="" /><br />
					<span>分类</span>
				</a>
				<span id="tanchu" class="tab-item external">
						<div><img src="img/tab.png" alt="" id="tab-add"/></div>
					</span>
				<a class="tab-item external" href="tab-cart.html">
					<img class="a3" src="img/cart.png" alt="" /><br />
					<span>购物车</span>
				</a>
				<a class="tab-item external a4" href="tab-me.html">
					<img class="a4" src="img/mine.png" alt="" /><br />
					<span >我的</span>
				</a>
			</nav>
		</div>

		<script type="text/javascript" src="js/zepto.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/sm.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/sm-extend.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/common.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/url.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript">
			form.onsubmit = function() {
				if($('.ispan>input').val() != '') {
					localStorage.searchwhere = $('.ispan>input').val();
					mui.openWindow({
						url: 'searchto.html',
						show: {
							aniShow: 'pop-in'
						}
					})
				} else if($('.ispan>input').val() == '') {
					mui.toast('请输入查询内容');
				}
				// your code
				return false;
			};
			mui.plusReady(function() {
				document.addEventListener('home', function() {
					$('.swiper-wrapper').html('');
					$('.home-bao').html('');
					$('.contentall').html('');
                    $('.swiper-pagination').html('');
					getinfor();
//					console.log('刷新0000')
				})
			})

			//页面跳转
			function tz(a, b, c) {
				mui.openWindow({
					url: a,
					id: b,

					//				extras:{
					//					
					//				},
					show: 'pop-in'
				});
				localStorage.numtowhere = c;
			}
			//验证是否需要登录
			//		$('#logistic').on('tap',function(){
			//			var token =localStorage.token;
			//			if(token==""){
			//				mui.toast('请先登录')
			//				mui.openWindow({
			//			    url: 'login.html', 
			//			    id:'login',
			//			    show:'pop-in'
			//			  });
			//			}else{
			//				mui.openWindow({
			//			    url: 'my-logistics.html', 
			//			    id:'my-logistics',
			//			    show:'pop-in'
			//			  });
			//			}
			//		})

			/*点击搜索*/
			$('.ispan>img').on('tap', function() {
				//			alert($('.ispan>input').val());
				if($('.ispan>input').val() != '') {
					localStorage.searchwhere = $('.ispan>input').val();
					mui.openWindow({
						url: 'searchto.html',
						show: {
							aniShow: 'pop-in'
						}
					})
				} else if($('.ispan>input').val() == '') {
					mui.toast('请输入查询内容');
				}
			})

			function more_module() {
				var popupHTML = '<div class="popup">' +
					'<div class="page-group">' +
					'<div class="page page-current">' +
					'<header class="bar bar-nav">' +
					'<h1 class="title">更多分类</h1>' +
					'<a class="button button-link ion-android-close pull-right close-popup"></a>' +
					'</header>' +
					'<div class="content" style="background-color: #fff">' +
					'<div class="all-module row no-gutter module-categories">' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>'
				$.popup(popupHTML)
				get_all_module();
			}

			//页面跳转
			$('.home-bao').on('tap', '.act01', function() {
				href('details.html', $(this).attr('id'));
			});
			//			$('.home-sq').on('tap','.home-dan',function(){
			//				href('details.html',$(this).attr('id'));
			//			});
			//			$('.home-sw').on('tap','.home-dan',function(){
			//				href('details.html',$(this).attr('id'));
			//			});
			$('.contentall').on('tap', '.home-dan', function() {
				//				alert(111);
				href('details.html', $(this).attr('id'));
			});
			$('.contentall').on('tap','img',function(){
//				alert($(this).attr('id')+'获取')
				href('details.html', $(this).attr('id'));
			})
			function href(a, c) {
				localStorage.whereId = c;
				mui.openWindow({
					url: a,
					show: {
						aniShow: 'pop-in'
					}
				})
			}

			/*点击查看更多*/
			$('.content').on('tap', '.lookmore', function() {
				//          	alert($(this).attr('id'));
				localStorage.lookwhere = $(this).attr('id');

				mui.openWindow({
					url: 'lookmore.html',
					show: {
						aniShow: 'pop-in'
					}
				})
			})


			$('.swiper-wrapper').on('tap', '.swiper-slide', function() {

				if($(this).attr('id').indexOf('http') < 0) {
					href('details.html', $(this).attr('id'));
				} else if($(this).attr('id').indexOf('http') >= 0) {
					window.open($(this).attr('id'));
//					plus.runtime.openURL($(this).attr('id'));
				}
				//          	alert($(this).attr('id'));                       	
			})
             
             $('.more').on('tap',function(){             	  
             	   	  $.ajax({
						url: ur + '/mobile/index',
						type: 'GET',
						headers: {
							"X-Token": localStorage.token,
						},
						dataType: 'json',
						data: '',
					})
					.done(function(data) {
						
						$('.more>p').text('已无更多');
						$('.contentall').html('');
						for(var i = 2; i < data.result.data.length; i++){
							
							//                        	  console.log(data.result.data[i][0].plName);
							/*var divstr = '<div class="home-se'+i'">' ; */
							var div = ('<div class="hone-recommend" style="margin-bottom: 0;"> ' +
								'<p style="text-align: center;">—— ' + data.result.data[i][0].plName + ' ——</p> ' +
								'<p id="' + i + '" class="lookmore">查看更多<img src="img/back-ri.png"/></p> <img id="'+data.result.data[i][0].plUrl+'" src=' + picur + data.result.data[i][0].plImgsrc + ' alt="" width="96%"/> ' +
								'<div class="home-se' + i + ' home-se">' +
								'</div> </div>');
							$('.contentall').append(div);

							if(data.result.data[i].length < 6) {
								var how2 = data.result.data[i].length;
							} else if(data.result.data[i].length >= 6) {
								var how2 = 7;
							}
							for(var y = 1; y < how2; y++) {
								var inner = data.result.data[i];
								//                        	        console.log(data.result.data[i][y].plName+'====275');
								//                        	        console.log(data.result.data[2].length+'====276');
								var divdan = ('<div class="home-dan" id=' + data.result.data[i][y].plUrl + '> ' +
									'<div class="home-picd" style="background-image: url(' + picur + data.result.data[i][y].plImgsrc + ');background-position: center;background-repeat: no-repeat;background-size: cover;"></div> ' +
									'<p>' + data.result.data[i][y].plName + '</p>' +
									'<p>' + data.result.data[i][y].plRemark + '</p> ' +
									'<p>¥<span style="font-size: 1rem;">' + data.result.data[i][y].plPrice + '</span>' +
									//									'<span class="home-add"><img src="img/add.png" alt="" width="50%"/></span>' +
									'</p> ' +
									'</div>');
								$('.home-se' + i + '').append(divdan);
							}
						}
					})
             	   
             })
             
			/*获取首页信息*/
			getinfor();
			function getinfor() {
//				alert(localStorage.token);
//				alert(ur);
				$.ajax({
						url: ur + '/mobile/index',
						type: 'GET',
						headers: {
							"X-Token": localStorage.token,
						},
						dataType: 'json',
						data: '',
					})
					.done(function(data) {
						//							console.log(data);
						//							console.log(data.result.data[0][1].plImgsrc);
						//							console.log(data.result.data[0].length)
						//						    console.log(data.result.data[1].length);
						var how = data.result.data[1].length;

						/*$('.img1').attr('scr',''+picur+data.result.data[0][1].plImgsrc+'');
						$('.img2').attr('scr',''+picur+data.result.data[0][1].plImgsrc+'');
						$('.img3').attr('scr',''+picur+data.result.data[0][2].plImgsrc+'');
						$('.img4').attr('scr',''+picur+data.result.data[0][3].plImgsrc+'');
						$('.img5').attr('scr',''+picur+data.result.data[0][3].plImgsrc+'');*/

						//                            console.log(picur+data.result.data[0][3].plImgsrc);
						/*轮播图for循环*/
						var lunb = data.result.data[0].length;
						for(var i = 1; i < lunb; i++) {

							//                          	console.log(i);
							//                          	console.log(data.result.data[0][i].plImgsrc);
							var div = ('<div class="swiper-slide" id="' + data.result.data[0][i].plUrl + '"><img src=' + picur + data.result.data[0][i].plImgsrc + ' width="100%"  alt="" /></div>');

							$('.swiper-wrapper').append(div);

						}

						$(function(){
							var mySwiper1 = new Swiper('.banner-swp', {
								autoplay: 2000,
								speed: 300,
								autoplayDisableOnInteraction: false,
								lazyLoading: true, // 图片懒加载
								paginationType: 'bullets',
								pagination: '.swiper-pagination',
								loop: true,
							})
						})

						//                        var how4 = data.result.data[1].length;
						if(data.result.data[1].length < 3) {
							var how4 = data.result.data[1].length;
						} else if(data.result.data[1].length >= 3) {
							var how4 = 4;
						}
						for(var i = 1; i < how4; i++) {
							//								console.log(data.result.data[1][i]);

							var div4 = ('<div class="row no-gutter act01" id=' + data.result.data[1][i].plUrl + '> ' +
								'<div class="row-le"> <div class="row-le-po">爆款</div>' +
								'<div class="fire-home" style="background-image: url(' + picur + data.result.data[1][i].plImgsrc + ');background-position: center;background-repeat: no-repeat;background-size: cover;"></div> </div> ' +
								'<div class="row-ri"> <p>' + data.result.data[1][i].plName + '</p> ' +
								'<p>' + data.result.data[1][i].plRemark + '</p> <p> ' +
								'<span style="font-size: .8rem;color: #f2b90a;">￥<span style="font-size: 1rem;font-weight: bold;color: #f2b90a;">' + data.result.data[1][i].plPrice + '</span></span> ' +
								'<span style="font-weight: bold;color:#f2b90a"></span> ' +
								'<span>元</span> ' +
								'<span class="row-ri-buy">立即抢购</span> </p> </div> </div>')
							$('.home-bao').append(div4);
						}

						if(data.result.data.length < 3 + 2) {
							var how = data.result.data.length;
						} else if(data.result.data.length >= 3 + 2) {
							var how = 5;
						}

						//                        alert(data.result.data.length);

						for(var i = 2; i < how; i++){
							var out = data.result.data;
							//                        	  console.log(data.result.data[i][0].plName);
							/*var divstr = '<div class="home-se'+i'">' ; */
							var div = ('<div class="hone-recommend" style="margin-bottom: 0;"> ' +
								'<p style="text-align: center;">—— ' + data.result.data[i][0].plName + ' ——</p> ' +
								'<p id="' + i + '" class="lookmore">查看更多<img src="img/back-ri.png"/></p> <img id="'+data.result.data[i][0].plUrl+'" src=' + picur + data.result.data[i][0].plImgsrc + ' alt="" width="96%"/> ' +
								'<div class="home-se' + i + ' home-se">' +
								'</div> </div>');
							$('.contentall').append(div);

							if(data.result.data[i].length < 6) {
								var how2 = data.result.data[i].length;
							} else if(data.result.data[i].length >= 6) {
								var how2 = 7;
							}
							for(var y = 1; y < how2; y++) {
								var inner = data.result.data[i];
								//                        	        console.log(data.result.data[i][y].plName+'====275');
								//                        	        console.log(data.result.data[2].length+'====276');
								var divdan = ('<div class="home-dan" id=' + data.result.data[i][y].plUrl + '> ' +
									'<div class="home-picd" style="background-image: url(' + picur + data.result.data[i][y].plImgsrc + ');background-position: center;background-repeat: no-repeat;background-size: cover;"></div> ' +
									'<p>' + data.result.data[i][y].plName + '</p>' +
									'<p>' + data.result.data[i][y].plRemark + '</p> ' +
									'<p>¥<span style="font-size: 1rem;">' + data.result.data[i][y].plPrice + '</span>' +
									//									'<span class="home-add"><img src="img/add.png" alt="" width="50%"/></span>' +
									'</p> ' +
									'</div>');
								$('.home-se' + i + '').append(divdan);
							}
						}
					})
			}
		</script>
	</body>

</html>